<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>23YY天气</title>
  <link rel="stylesheet" href="http://www.yytianqi.com/css/style.css">
</head>

<body>
  <div style=" width:100%; height:76px; margin:0 auto; background-color:#212121;">
    <div class="topnav">
      <div class="topnavsbox">
        <span class="topnav_span1"><a href="/"><img src="http://www.yytianqi.com/images/logoimg.png"></a></span>
        <ul>
          <li><a href="/">首页</a></li>
          <li><a href="/">天气查询</a></li>
          <li><a href="/">API介绍</a></li>
          <li><a href="/">价格</a></li>
          <li><a href="/">发布厅</a></li>
        </ul>
        <div class="topnav_span3">
          <a href="/" class="topnav_span31">会员管理</a>
          <a href="/" class="topnav_span32">退出</a>
        </div>
      </div>
    </div>
  </div>
  <div class="chaxun_box">
    <div class="chaxun_boxleft">
      <div class="chaxun_boxleft_tit">
        <ul>
          <a href="/">
            <li class="hover">国内</li>
          </a>
          <a href="/">
            <li>国际</li>
          </a>
        </ul>
      </div>
      <!-- 省 -->
      <div class="chaxun_xleft01" id="cityfirst">
        <!-- <a>直辖市</a> -->
      </div>
      <!-- 市 -->
      <div class="chaxun_xleft011" id="citysecond">
        <!-- <a>香港</a> -->
      </div>
      <!-- 区 -->
      <div class="chaxun_xleft012" id="cityend">
        <!-- <a>文山</a> -->
      </div>

      <!-- 天气部分 -->
      <div class="chaxun_xleft02">
        <div class="chaxun_xltq02">
          <!-- <div class="chaxun_xltq03">
             <div class="chaxun_xltq04">
              <div class="chaxun_xltq05">
                <b>麻栗坡</b><br>
              </div>
              <div class="chaxun_xltq06">
                <span>2019-07-30 周二 农历六月廿八</span>
                <span>20:40更新</span>
              </div>
            </div>
            <div class="chaxun_xltq07">
              <b> <img src="http://www.yytianqi.com/images/bigimg/01_1.png"> </b>
              <span>多云</span>
            </div>
          </div>
          <div class="chaxun_er_box">
             <div class="chaxun_er_boxcse">
              <input name="" class="sddvdsvq" type="text" onclick="search1()" onkeyup="cityName()" value="麻栗坡"
                placeholder="支持中英文及拼音搜索...">
              <input name="" type="image" src="http://www.yytianqi.com/images/ssd.png">
            </div>
            <div class="chaxun_elist">
              <ul>
                <li><img src="http://www.yytianqi.com/images/picv01.png"><span>气温：25℃ </span></li>
                <li><img src="http://www.yytianqi.com/images/picv03.png"><span>风力： 2级 </span></li>
                <li><img src="http://www.yytianqi.com/images/picv05.png"><span>日出时间：</span></li>
              </ul>
              <ul style=" margin-left:30px;">
                <li><img src="http://www.yytianqi.com/images/picv02.png"><span>湿度： 77% </span></li>
                <li><img src="http://www.yytianqi.com/images/picv04.png"><span>风向： 东风 </span></li>
                <li><img src="http://www.yytianqi.com/images/picv05.png"><span>日落时间： </span></li>
              </ul>
            </div>
          </div> -->
        </div>
        <div class="cha_n_xltq02">
          <!-- <div class="cha_n_xltqtit">
            <span>空气质量</span>
            <i>数据来源：环保局 2019-05-21 16:00:00 发布</i>
          </div>
          <div class="cha_n_xltqbox2">
            <span style="margin-right: 30px;" class="spanaqi0">优</span>
            <i>AQI：34</i>
            <i>PM2.5：7</i>
            <i>级别：一级</i>  
          </div>
          <div class="cha_n_xltqbox3">空气质量令人满意，基本无空气污染</div>
          <div class="cha_n_xltqbox3">各类人群可正常活动</div> -->
        </div>
      </div>

      <!-- 逐时预报 -->
      <div class="navion">
        <div class="naviontit"><span>逐时预报</span></div>
        <div class="navigation">
          <ul>
            <!-- <li>
              <table width="80">
                <tbody>
                  <tr>
                    <td align="center" valign="middle">21:00</td>
                  </tr>
                  <tr>
                    <td style="padding-top: 7px;" align="center" valign="middle">
                      <img src="http://www.yytianqi.com/images/tubiao/01_1.png">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding-top: 3px;" align="center" valign="middle">多云</td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle">23℃</td>
                  </tr>
                </tbody>
              </table>
            </li> -->
          </ul>
        </div>
      </div>

      <!-- 七天预报 -->
      <div class="navion02">
        <div class="naviontit02"><span>七天预报</span></div>
        <div class="navigation02">
          <ul>
            <!-- <li>
              <table width="100%">
                <tbody>
                  <tr>
                    <td colspan="2" align="center" valign="middle">07-30</td>
                  </tr>
                  <tr>
                    <td width="50%" style="padding-top: 10px;" align="right" valign="middle"><img
                        src="http://www.yytianqi.com/images/tubiao/03_0.png"> </td>
                    <td width="50%" style="padding-top: 10px;" align="left" valign="middle"><img
                        src="http://www.yytianqi.com/images/tubiao/03_1.png" width="70" height="40"></td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle">昼</td>
                    <td align="center" valign="middle">夜</td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle">阵雨</td>
                    <td align="center" valign="middle">阵雨</td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle" style=" font-size:22px; padding-top: 10px;">28℃ </td>
                    <td align="center" valign="middle" style=" font-size:22px; padding-top: 10px;"> 20℃</td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle" style=" padding-top: 10px;">微风</td>
                    <td align="center" valign="middle" style=" padding-top: 10px;">微风</td>
                  </tr>
                  <tr>
                    <td align="center" valign="middle" style=" padding-top: 10px;">无持续风向</td>
                    <td align="center" valign="middle" style=" padding-top: 10px;">无持续风向</td>
                  </tr>
                </tbody>
              </table>
            </li> -->
          </ul>
        </div>
      </div>

      <!-- 生活指数 -->
      <div class="navion02">
        <div class="naviontit02"><span>生活指数</span></div>
        <div class="sh_menu">
          <style>
            .sh_menu ul li:nth-child(4n) {
              margin-right: 0;
            }

            .sh_menu ul li:hover .h3_01 {
              cursor: pointer;
              z-index: 2;
              display: block;
            }
          </style>
          <ul>
            <!-- <li class="navtitle01">
              <div class="h3_01"><a>大部分人感到不舒适，室外活动人们会感到疲倦或闷热。户外活动不适宜在中午前后展开。</a></div>
              <span class="ddspan01">
                <img src="http://www.yytianqi.com/images/shengh04.png" width="70" height="70">
              </span>
              <span class="ddspan02">体感温度</span>
              <span class="ddspan03">较热</span>
            </li> -->
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="jquery-1.11.3.js"></script>
<script>
$.ajax({
  type:"get",
  url:"http://api.yytianqi.com/citylist/id/2",
  dataType:"json",
  success:function(data){
    var list=data.list
    var arr1=list.splice(0,4)
    var arr2=list.splice(27,2)
   
    list.unshift({
      city_id:"99",
      name:"直辖市",
      list:arr1
    },{
      city_id:"98",
      name:"特别行政区",
      list:arr2
    })
    console.log(list)
    var html=''
    list.forEach(function(item){
      html+=`<a data-id=${item.city_id}>${item.name}</a>`
    })
    cityfirst.innerHTML=html

    cityfirst.onclick=function(e){
      var ev=event||e
      var target=ev.target||ev.srcElement
      if(target.tagName=="A"){
        var privoeId=target.getAttribute('data-id')
        
       var citylist=list.filter(item=>item.city_id==privoeId)
     
      }
      

    }


  }

})









  // var xhr = new XMLHttpRequest()
  // xhr.open("get", "http://api.yytianqi.com/citylist/id/2", true)
  // xhr.send()
  // xhr.onreadystatechange = function () {
  //   if (xhr.readyState == 4 && xhr.status == 200) {
  //     var obj = JSON.parse(xhr.responseText)
  //     // console.log(obj)

  //     var list = obj.list

  //     var arr1 = list.splice(0, 4)
  //     var arr2 = list.splice(27, 2)

  //     list.unshift({
  //       city_id: "CH99",
  //       name: "直辖市",
  //       list: arr1
  //     },
  //     {
  //         city_id: "CH98",
  //         name: "特别行政区",
  //         list: arr2
  //       })

  //     console.log(list)
  //     var html1 = ''
  //     list.forEach(function (item) {
  //       html1 += `<a provies-id=${item.city_id}>${item.name}</a>`

  //     })
  //     cityfirst.innerHTML = html1

  //     cityfirst.onclick = function (e) {
  //       cityend.innerHTML = ''
  //       var ev = event || e
  //       var target = ev.target || ev.srcElemet
  //       if (target.tagName == "A") {
  //         var result = target.getAttribute("provies-id")
  //         // console.log(result)

  //         var arr = list.filter(item => item.city_id == result)[0]
  //         var cityList = arr.list
  //         var html2 = ''
  //         cityList.forEach(function (item) {
  //           html2 += `<a city-id=${item.city_id}>${item.name}</a>`
  //         })
  //         citysecond.innerHTML = html2

  //         citysecond.onclick = function (e) {
  //           var ev = event || e
  //           var target = ev.target || ev.srcElemet
  //           if (target.tagName == "A") {
  //             var result = target.getAttribute("city-id")
  //             // console.log(result)

  //             var arr = cityList.filter(item => item.city_id == result)[0]
  //             var areaList = arr.list
  //             var html3 = ''
  //             areaList.forEach(function (item) {
  //               html3 += `<a area-id=${item.city_id}>${item.name}</a>`
  //             })
  //             cityend.innerHTML = html3

  //             cityend.onclick = function (e) {
  //               var ev = event || e
  //               var target = ev.target || ev.srcElemet
  //               if (target.tagName == "A") {
  //                 var obj = target.getAttribute("area-id")
  //                 // console.log(obj)
  //                 fn(obj)
  //                 fn1(obj)
  //                 fn2(obj)
  //                 fn3(obj)
  //               }
  //             }
  //           }
  //         }
  //       }
  //     }

  //   }

  // }

  // function fn(data) {
  //   $.ajax({
  //     type: "get",
  //     url: `http://api.yytianqi.com/observe?city=${data}&key=iehm8fh26a2d9hmu`,
  //     dataType: "json",
  //     success: function (item) {
  //       var obj = item.data
  //       var {
  //         cityId,
  //         cityName,
  //         fl,
  //         fx,
  //         lastUpdate,
  //         numfl,
  //         numfx,
  //         numtq,
  //         qw,
  //         sd,
  //         tq
  //       } = obj
  //       var html=`<div class="chaxun_xltq03">
  //            <div class="chaxun_xltq04">
  //             <div class="chaxun_xltq05">
  //               <b>${cityName}</b><br>
  //             </div>
  //             <div class="chaxun_xltq06">
  //               <span>2019-07-30 周二 农历六月廿八</span>
  //               <span>${lastUpdate}更新</span>
  //             </div>
  //           </div>
  //           <div class="chaxun_xltq07">
  //             <b> <img src="http://www.yytianqi.com/images/bigimg/${numtq}_1.png"> </b>
  //             <span>${tq}</span>
  //           </div>
  //         </div>
  //         <div class="chaxun_er_box">
  //            <div class="chaxun_er_boxcse">
  //             <input name="" class="sddvdsvq" type="text" onclick="search1()" onkeyup="cityName()" value="${cityName}"
  //               placeholder="支持中英文及拼音搜索...">
  //             <input name="" type="image" src="http://www.yytianqi.com/images/ssd.png">
  //           </div>
  //           <div class="chaxun_elist">
  //             <ul>
  //               <li><img src="http://www.yytianqi.com/images/picv01.png"><span>气温：${qw}℃ </span></li>
  //               <li><img src="http://www.yytianqi.com/images/picv0${numfl}.png"><span>风力： ${fl} </span></li>
  //               <li><img src="http://www.yytianqi.com/images/picv05.png"><span>日出时间：</span></li>
  //             </ul>
  //             <ul style=" margin-left:30px;">
  //               <li><img src="http://www.yytianqi.com/images/picv02.png"><span>湿度： ${sd}% </span></li>
  //               <li><img src="http://www.yytianqi.com/images/picv0${numfx}.png"><span>风向： ${fx} </span></li>
  //               <li><img src="http://www.yytianqi.com/images/picv05.png"><span>日落时间： </span></li>
  //             </ul>
  //           </div>
  //         </div>`
  //         $(".chaxun_xltq02").html(html)
  //     }
  //   })
  // }



  // function fn1(data){
  //   $.ajax({
  //     type:"get",
  //     url:`http://api.yytianqi.com/weatherhours?city=${data}&key=iehm8fh26a2d9hmu`,
  //     dataType:"json",
  //     success:function(arr){
  //       var list=arr.data.list
  //       // console.log(arr.data.list)
  //       var html=""
  //       list.forEach(function(item){
  //         var {
  //           numtq,
  //           qw,
  //           sd,
  //           sj,
  //           tq
  //         }=item
  //         html+=`<li>
  //             <table width="80">
  //               <tbody>
  //                 <tr>
  //                   <td align="center" valign="middle">${sj}</td>
  //                 </tr>
  //                 <tr>
  //                   <td style="padding-top: 7px;" align="center" valign="middle">
  //                     <img src="http://www.yytianqi.com/images/tubiao/${numtq}_1.png">
  //                   </td>
  //                 </tr>
  //                 <tr>
  //                   <td style="padding-top: 3px;" align="center" valign="middle">${tq}</td>
  //                 </tr>
  //                 <tr>
  //                   <td align="center" valign="middle">${qw}℃</td>
  //                 </tr>
  //               </tbody>
  //             </table>
  //           </li>`
  //       })
  //       $(".navigation").html(html)
  //     }

  //   })
  // }

  // function fn2(data){
  //   $.ajax({
  //     type:"get",
  //     url:`http://api.yytianqi.com/forecast7d?city=${data}&key=iehm8fh26a2d9hmu`,
  //     dataType:"json",
  //     success:function(data){
  //       var list=data.data.list
  //       // console.log(data.data.list)
  //       var html=''
  //       list.forEach(function(item){
  //         var {
  //           date,
  //           fl1,
  //           fl2,
  //           fx1,
  //           fx2,
  //           numfl1,
  //           numfl2,
  //           numfx1,
  //           numfx2,
  //           numtq1,
  //           numtq2,
  //           qw1,
  //           qw2,
  //           tq1,
  //           tq2
  //         }=item
  //         html+=`<li>
  //             <table width="100%">
  //               <tbody>
  //                 <tr>
  //                   <td colspan="2" align="center" valign="middle">${date}</td>
  //                 </tr>
  //                 <tr>
  //                   <td width="50%" style="padding-top: 10px;" align="right" valign="middle"><img
  //                       src="http://www.yytianqi.com/images/tubiao/03_0.png"> </td>
  //                   <td width="50%" style="padding-top: 10px;" align="left" valign="middle"><img
  //                       src="http://www.yytianqi.com/images/tubiao/03_1.png" width="70" height="40"></td>
  //                 </tr>
  //                 <tr>
  //                   <td align="center" valign="middle">昼</td>
  //                   <td align="center" valign="middle">夜</td>
  //                 </tr>
  //                 <tr>
  //                   <td align="center" valign="middle">${tq1}</td>
  //                   <td align="center" valign="middle">${tq2}</td>
  //                 </tr>
  //                 <tr>
  //                   <td align="center" valign="middle" style=" font-size:22px; padding-top: 10px;">${qw1}℃ </td>
  //                   <td align="center" valign="middle" style=" font-size:22px; padding-top: 10px;"> ${qw2}℃</td>
  //                 </tr>
  //                 <tr>
  //                   <td align="center" valign="middle" style=" padding-top: 10px;">${fl1}</td>
  //                   <td align="center" valign="middle" style=" padding-top: 10px;">${fl2}</td>
  //                 </tr>
  //                 <tr>
  //                   <td align="center" valign="middle" style=" padding-top: 10px;">${fx1}</td>
  //                   <td align="center" valign="middle" style=" padding-top: 10px;">${fx2}</td>
  //                 </tr>
  //               </tbody>
  //             </table>
  //           </li>`
  //           $(".navigation02 ul").html(html)
  //       })
  //     }
  //   })
  // }

  // function fn3(data){
  //   $.ajax({
  //     type:"get",
  //     url:`http://api.yytianqi.com/weatherindex?city=${data}&key=iehm8fh26a2d9hmu`,
  //     dataType:"json",
  //     success:function(arr){
  //       var obj=arr.data.list
  //       console.log(obj)
  //       var html=''
  //       obj.forEach(function(item){
  //         var {
  //           index,
  //           longDesc,
  //           shortDesc,
  //           type
  //         }=item
  //         html+=`<li class="navtitle01">
  //             <div class="h3_01"><a>${longDesc}</a></div>
  //             <span class="ddspan01">
  //               <img src="http://www.yytianqi.com/images/shengh0${index}.png" width="70" height="70">
  //             </span>
  //             <span class="ddspan02">${type}</span>
  //             <span class="ddspan03">${shortDesc}</span>
  //           </li>`
  //       })
  //       $(".navion02 ul").html(html)
  //     }
  //   })
  // }

</script>

</html>

